<script setup lang="ts" >
import { ref } from 'vue'
import  type { TableColumnsType } from 'ant-design-vue'

const columns: TableColumnsType = [
  {
    title: '标签名',
    dataIndex: 'label'
  },
  {
    title: '标签编码',
    dataIndex: 'code'
  },
  {
    title: '标签',
    dataIndex: 'label'
  },
  {
    title: '操作',
    dataIndex: 'operation'
  }
]
const dataSource = ref([
  {
    label: '标签1',
    code: '1'
  },
  {
    label: '标签2',
    code: '2'
  }
])
</script>
<template>
  <section class="h-box-margin-top-bottom">
    <a-form layout="inline">
      <a-form-item label="标签名"> <a-input></a-input></a-form-item>
      <a-form-item label="标签编码"><a-input></a-input></a-form-item>
      <a-form-item>
        <a-button-group>
          <a-button type="primary">查询</a-button>
          <a-button> 重置</a-button>
        </a-button-group>
      </a-form-item>
    </a-form>
  </section>
  <section class="h-box-margin-top-bottom">
    <a-button type="primary">新增</a-button>
  </section>

  <section class="h-box-margin-top-bottom">
    <a-table
      :columns="columns"
      :data-source="dataSource"
    >
      <template #bodyCell="{ column }">
        <template v-if="column.dataIndex === 'operation'">
          <a-button size="small">修改</a-button>
          <a-button size="small">删除</a-button>
        </template>
      </template>
    </a-table>
  </section>
</template>
<style  scoped>


</style>
